<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="@/static/2.png"></image>
		<image class="img-b" src="@/static/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<form class="cl">
			<view class="t-a">
			</view>
			<view class="t-a">
			</view>
			<button class="btn-login" @getphonenumber="getPhoneNumber" lang="zh_CN" open-type="getPhoneNumber">微 信 一 键 授
				权 登 录</button>
		</form>
		<view class="t-f"><text>————— 第三方账号登录 —————</text></view>
		<view class="t-e cl">
			<view class="t-g" @tap="wxLogin()">
				<image src="@/static/wx.png"></image>
			</view>
			<view class="t-g" @tap="zfbLogin()">
				<image src="@/static/qq.png"></image>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		/**
		 * 2020年12月1日   李新雷编写（练习）  适用所有app登录
		 * vue版本简洁又美观的登录页面（个人感觉插件市场的登录都不太好看，哈哈 O(∩_∩)O）
		 * 该模板只是登录模板：验证、倒计时等都已经写好，
		 * 如果需要注册（注册可以设计在登录按钮下方），
		 * 直接复制该页面稍微改动即可
		 */
		data() {
			return {
				data: {},
				title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				phone: '', //手机号码
				code: '',
				yzm: '' //验证码
			};
		},
		onLoad() {},
		onShow() {
			// console.log(this.prePage(0).__route__)
		},
		methods: {
			//index不传参，默认就是上一个页面组件实例，此时可以使用上一个组件的methods等
			prePage(index) {
							let pages = getCurrentPages();
							console.log(pages);
							let prePage = pages[pages.length - (index || 2)];
							return prePage.$vm;
						},
			//当前登录按钮操作
			login() {
				var that = this;
				//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
				uni.showToast({
					title: '登录成功！',
					icon: 'none'
				});
			},
			getPhoneNumber(e) {
				console.log(e)
				this.data = e.detail
				const that = this
				// #ifdef MP-WEIXIN
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res) => {
									// _self.authorization = res.code
									uni.getUserInfo({
										provider: 'weixin',
										withCredentials: true,
										success: (info) => { //这里请求接口
											console.log(res, 'res')
											console.log(info, 'info')
											that.getUserProfile(info, res.code)

										},
										fail: () => {
											uni.showToast({
												title: "拒绝授权将无法使用",
												// title: "微信登录授权失败",
												icon: "none"
											})
										}
									})

								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '拉取授权失败',
							icon: "none"
						});
					}
				});
				//#endif
			},
			getUserProfile(user, code) {
				uni.showModal({
					title: '温馨提示',
					content: '亲，请授权后获取您的昵称',
					success: res => {
						uni.getUserProfile({
							desc: '显示用户昵称',
							lang: 'zh_CN',
							success: val => {
								console.log(val, '用户信息');
								let params = {
									iv: user.iv,
									code: code,
									encryptedData: user.encryptedData,
									signature: user.signature,
									rawData: user.rawData,
									nickName: val.userInfo.nickName,
									// userInfo:info.userInfo,
								}
								this.toLogin(val, code)
							},
							fail: error => {
								uni.showToast({
									title: "微信登录授权失败",
									icon: "none"
								});
							}
						})
					}
				})
			},
			// 小程序登录
				toLogin(info, code) {
				// console.log(params, '99')
				this.$request('', '/api/app/coupon/login', 'POST', {
					code: code
				}, {}).then(res => {
					uni.setStorageSync('token', res.token)
					this.getUser(info, res.data, res.token, res.session_key)
				})
			},
			// 小程序获取用户信息
			getUser(info, openid, token, session_key) {
				uni.setStorageSync('openid', openid)
				this.$request('', '/api/app/coupon/getuserinfo', 'POST', {
					openid: openid,
					token: token
				}, {}).then(res => {
					console.log(res)
					if (res.msg == '用户数据不存在') {
						this.getRegister(info, openid, token, session_key)
					} else {
						if (res.data.mobile == 0 || res.data.mobile == '') {
							this.$request('', '/api/app/coupon/getusermobile', 'POST', {
								openid: openid,
								encryptedData: this.data.encryptedData,
								iv: this.data.iv,
								token: token,
								session_key: session_key
							}, {}).then(res => {
								var data = uni.getStorageSync('userInfo')
								data.mobile = res.data.mobile
								uni.setStorageSync('userInfo', data)
								console.log(res, 'two')
							})
						}
						// console.log('000999')
						uni.setStorageSync('userInfo', res.data)
						var url = this.prePage(0).__route__
						console.log(url)
						if (url == 'pages/order/index') {
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}

					}
				})
			},
			// 小程序注册
			getRegister(info, openid, token, session_key) {
				var that = this
				this.$request('', '/api/app/coupon/reguser', 'POST', {
					openid: openid,
					rawData: info.rawData,
					signature: info.signature,
					token: token,
					sn: uni.getStorageSync('ordersn')
				}, {}).then(res => {
					uni.showLoading({
					    title: '注册中...'
					});
					setTimeout(function () {
						uni.hideLoading();
						that.$request('', '/api/app/coupon/getusermobile', 'POST', {
							openid: openid,
							encryptedData: that.data.encryptedData,
							iv: that.data.iv,
							token: token,
							session_key: session_key
						}, {}).then(res => {
							uni.setStorageSync('userInfo', res.data)
							console.log(res, 'two')
						})
						var url = that.prePage(0).__route__
						console.log(url)
						if (url == 'pages/order/index') {
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}, 2000);
				})
			},
			//等三方微信登录
			wxLogin() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				});
			},
			//第三方支付宝登录
			zfbLogin() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				});
			}
		}
	};
</script>
<style>
	.img-a {
		position: absolute;
		width: 100%;
		top: -280rpx;
		right: -100rpx;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		margin-bottom: -200rpx;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
		padding-top: 200rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		font-weight: bold;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
		margin-top: 200upx;
	}

	.btn-login {
		margin-bottom: 200upx;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>
